<template>
  <el-dialog width="1200px" :title="$t('m.region.chooselocaiton')" :visible.sync="popupVisible" :before-close="close" top="8vh" append-to-body lock-scroll center>
    <el-row :gutter="20">
      <!-- 左侧查询条件 start -->
      <el-col :span="6">
        <el-form :model="formInline" size="mini" label-width="120px" @keyup.enter.native="search">
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('m.location.identificationcode')">
                <el-input clearable v-model="formInline.identificationcode" class="uppercase" ref="inputRef"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('m.location.locationcode')">
                <el-input clearable v-model="formInline.locationcode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('m.location.partitioncode')">
                <el-input clearable v-model="formInline.partitioncode"></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="24">
              <el-form-item :label="$t('m.location.floor')">
                <el-input clearable v-model="formInline.floor"></el-input>
              </el-form-item>
            </el-col>-->
            <el-col :span="24">
              <el-form-item :label="$t('m.location.channel')">
                <el-input clearable v-model="formInline.channel"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('m.location.shelves')">
                <el-input clearable v-model="formInline.shelves"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('m.location.level')">
                <el-input clearable v-model="formInline.level"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('m.location.grating')">
                <el-input clearable v-model="formInline.grating"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" align="center">
              <el-button size="mini" type="primary" @click="search" :loading="btnLoading">{{$t('m.query')}}</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <!-- 左侧查询条件 end -->

      <!-- 右侧库位列表 start -->
      <el-col :span="18">
        <scrollbar :propStyleOptions=propStyleOptions>
          <el-row>
            <el-checkbox v-if="locationList.length" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">{{$t('m.selectall')}}</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="alreadyChecked" @change="handleCheckedChange">
              <el-col :span="4" v-for="(item,index) in locationList" :key="index" class="checkbox-item">
                <el-checkbox :label="item">{{item}}</el-checkbox>
              </el-col>
            </el-checkbox-group>
          </el-row>
        </scrollbar>
      </el-col>
      <!-- 右侧库位列表 end -->
    </el-row>
    <div slot="footer">
      <el-button size="mini" type="primary" @click="submit" :loading="loading">{{$t('m.confirm')}}</el-button>
      <el-button size="mini" @click="close">{{$t('m.cancel')}}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import scrollbar from '@/components/common/scrollbar'
export default {
  name:'location-list',
  props:{
    popupVisible:{
      type:Boolean,
      default:false
    },
    config:{
      type:Object,
      default:()=>{}
    }
  },
  data(){
    return {
      formInline:{
        identificationcode:'', // 识别码
        partitioncode:'', // 库区编码
        // floor:'',
        channel:'', // 通道号
        shelves:'', // 货架号
        level:'', // 层号
        grating:'', // 格号
        locationcode:'' // 库位编码
      },
      locationList:[], // 库位list
      alreadyChecked:[], // 已选中库位list
      checkAll:false,
      isIndeterminate:false,

      propStyleOptions:{height:'50vh'},
      btnLoading:false, // 控制按钮loading，防止重复提交
      loading:false
    }
  },
  mounted(){
    // 设置默认焦点
    this.$nextTick(() => {
      this.$refs.inputRef.focus()
    })
  },
  destroyed(){
  },
  components:{
    scrollbar
  },
  methods:{
    handleCheckAllChange(val){
      this.alreadyChecked = val ? this.locationList : []
      this.isIndeterminate = false
    },
    handleCheckedChange(value){
      let checkedCount = value.length
      this.checkAll = checkedCount === this.locationList.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.locationList.length
    },
    close(){
      this.$emit('close')
    },
    // 根据条件查询库位
    search(){
      this.getData()
    },
    getData(){
      this.checkAll = false
      let identificationcode = this.formInline.identificationcode.toUpperCase() // 识别码要转大写
      let options = {
        method:'get',
        url:this.config.url
          ? this.config.url
          : `/locationinfo/queryByPartitontype`,
        params:{...this.formInline, ...{ identificationcode }, ...this.config.params}
      }
      this.btnLoading = true
      this.$axios(options).then(({ data }) => {
        this.btnLoading = false
        this.locationList = data.map(item=>item.locationcode)
        if (!this.locationList.length)
          this.callbackMessage(this.$t('m.nomatchlocation'))
      }).catch(() => {
        this.btnLoading = false
      })
    },
    // 提交当前选中库位
    submit(){
      if (!this.alreadyChecked.length) return this.callbackMessage(this.$t('m.pleasechooselocaiton'))
      this.loading = true
      this.$emit('submit', this.alreadyChecked)
    }
  }
}
</script>
<style lang="scss" scoped>
.checkbox-item {
  margin-bottom: 10px;
}
.uppercase ::v-deep .el-input__inner {
  text-transform: uppercase;
}
</style>